<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
          <z-form-item
            :datas="fieldArr"
            :form="queryParam"
            :submitAction="{show: true, toggle: false, span: 6}"
            @change="getChangeTime"
            @onSubmit="onQuery"
            @onReset="onResetForm"
          />
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="false"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @change="onTableChange"
        />
      </div>
    </a-card>
  </div>
</template>

<script>
import * as flowServiceApi from '@/api/sjsk/flowService'
export default {
  props: { tabValue: Number },
  data() {
    return {
      loading: false,
      queryParam: {},
      fieldArr: [
        { label: '类型', prop: 'type', tagType: 'dict-select', dictCode: 'process_approval_type', span: 6 },
        { label: '申请人', prop: 'applicant', tagType: 'input', span: 6 },
        { label: '申请时间', prop: 'time', tagType: 'range-picker', format: 'YYYY-MM-DD', span: 6 },
      ],
      columns: [
        { title: '序号', dataIndex: 'order', width: 60, align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize +
              (index + 1)}` //序号分页后连续
        },
        { title: '编号', dataIndex: 'approvalNumber', width: 80, align: 'left' },
        { title: '类型', dataIndex: 'type', width: 120, align: 'center',
          customRender:(text)=> {
            return <j-ellipsis value={this.$filterDictTextByCache('process_approval_type', text)} length={20} />
          }
        },
        { title: '申请人', dataIndex: 'createBy', width: 70, align: 'center'},
        { title: '所属机构', dataIndex: 'departName', width: 70, align: 'center',
          customRender:(text)=> {
            return text?<j-ellipsis value={text} length={14} />: '--'
          }
        },
        { title: '申请时间', dataIndex: 'createTime', width: 80, align: 'center' },
        { title: '更新时间', dataIndex: 'updateTime', width: 100, align: 'center',
          customRender:(text)=> {
            return text? text: '--'
          }
        },
        {
          title: '操作',
          width: 60,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return <a-button onClick={(event) => this.handleDetails(record)} type="link" style="padding:0;"> 详情 </a-button>
          }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {}
    }
  },
  watch: {
    tabValue: {
      immediate: true,
      deep: true,
      handler(val) {
        this.onQuery()
      }
    }
  },
  methods: {
    onQuery() {
      this.$set(this.queryParam, 'status', this.tabValue===2? [1]: this.tabValue===3? [2,3]:'' )
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.$set(this.queryParam, 'status', this.tabValue===2? [1]: this.tabValue===3? [2,3]:'' )
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let {time, ...dataParam} = this.queryParam // 剔除applicationTime元素，dataParam最新的对象
      console.log(this.queryParam);
      let queryParam = Object.assign({}, dataParam, this.pageFilter)
      console.log(queryParam);
      this.loading = true
      flowServiceApi
        .getProcessInfoList(queryParam)
        .then((res) => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 详情
    handleDetails(record) {
      this.$router.push({
        path: `/examine/details/${record.type}/${record.taskId}`,
        query: { tab: this.tabValue }
      })
    },
    // 获取组件的时间， prop为对应的字段，date为选中的时间值
    getChangeTime(prop, date) {
      if(prop === 'time') {
        this.$set( this.queryParam, 'startTime', date[0] )
        this.$set( this.queryParam, 'endTime', date[1] )
      }
    }
  },
}
</script>

<style scoped lang="less"></style>
